import 'package:eyepetizer_example/model/common_item.dart';
import 'package:eyepetizer_example/state/base_list_state.dart';
import 'package:eyepetizer_example/utils/cache_image.dart';
import 'package:eyepetizer_example/widget/go_navigation.dart';
import 'package:eyepetizer_example/widget/home/list_item_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../../viewmodel/discovery/category_detail_viewmodel.dart';
import '../../viewmodel/discovery/category_model.dart';

class CategoryDetailPage extends StatefulWidget {

  final CategoryModel categoryModel;
  const CategoryDetailPage({Key? key, required this.categoryModel}) : super(key: key);

  @override
  State<CategoryDetailPage> createState() => _CategoryDetailPageState();
}

class _CategoryDetailPageState extends BaseListState<ItemList, CategoryDetailViewModel, CategoryDetailPage> {

  @override
  void init() {
    // 设置不能下拉刷新
    enablePullDown = false;
  }

  @override
  Widget getContentChild(CategoryDetailViewModel model) {
    return CustomScrollView(
      slivers: [
        _sliverAppBar(),
        _sliverList(model),
      ],
    );
  }

  @override
  CategoryDetailViewModel get viewModel => CategoryDetailViewModel(widget.categoryModel.id??0);

  Widget _sliverAppBar() {
    return SliverAppBar(
      leading: GestureDetector(
        onTap: ()=> GoNavigator.back(context),
        child: const Icon(Icons.arrow_back, color: Colors.black,),
      ),
      elevation: 0,
      systemOverlayStyle: SystemUiOverlayStyle.light,
      backgroundColor: Colors.white,
      // 展开区域的高度
      expandedHeight: 200,
      // 设置为true时，当SliverAppBar内容滑出屏幕时，将始终渲染一个固定在顶部的收起状态
      pinned: true,
      // 展开和折叠区域
      flexibleSpace: _flexibleSpace(),
    );
  }

  /// 内容列表
  Widget _sliverList(CategoryDetailViewModel model) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
          (context, index) {
            return ListItemWidget(
              item: model.itemList[index],
              showCategory: false,
              showDivider: false,
            );
          },
        childCount: model.itemList.length
      ),
    );
  }

  // 判断是否展开，从而改变字体颜色
  bool isExpend = true;
  /// 弹性空间
  Widget _flexibleSpace() {
    return LayoutBuilder(
      builder: (context, constraints){
        changeExpendStatus(
          (MediaQuery.of(context).padding.top).toInt() + 56,
          constraints.biggest.height.toInt(),
        );
        return FlexibleSpaceBar(
          title: Text(
            widget.categoryModel.name??"",
            style: TextStyle(
              color: isExpend ? Colors.white : Colors.black
            ),
          ),
          centerTitle: false,
          background: cacheImage(widget.categoryModel.headerImage??""),
        );
      },
    );
  }

  void changeExpendStatus(int statusBarHeight, int offset) {
    if (offset > statusBarHeight && offset < 250) {
      if (!isExpend) {
        isExpend = true;
      }
    } else {
      if (isExpend) {
        isExpend = false;
      }
    }
  }

}
